<template>
	<view class="details">
		<xbd-pages-content :title="title">
			<template #content>
				<view class="content" :style="'minHight : ' + windowHeight + 'px;'">
					<view class="audit_type">申请详情</view>
					<view class="box">
						<view class="">
							<text>指标类型</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.performance_type}}</text>
						</view>
						<view class="icon">
							<image v-if="fromDate.performance_statue==='1'" src="../../static/images/meal/yes.svg"
								mode=""></image>
							<image v-else-if="fromDate.performance_statue==='0'" src="../../static/images/meal/stay.svg"
								mode="">
							</image>
							<image v-else-if="fromDate.performance_statue==='2'" src="../../static/images/meal/no.svg"
								mode="">
							</image>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>工作指标</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.work_target}}</text>
						</view>
					</view>
					<view class="box" v-if="fromDate.amount!==0 && fromDate.work_target1!==191">
						<view class="">
							<text>数量</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.amount}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>开始时间</text>
						</view>
						<view class="box_right date">
							<text>{{fromDate.start_time | timeFormat('YYYY-MM-DD HH:mm')}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>结束时间</text>
						</view>
						<view class="box_right date">
							<text>{{fromDate.end_time | timeFormat('YYYY-MM-DD HH:mm')}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>备注</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.note}}</text>
						</view>
					</view>


					<view class="line">
					</view>

					<!-- 审批页面审核评定 -->
					<view class="">
						<view class="audit_type">审核评定</view>
						<uni-forms ref="form" :modelValue="evaluation" :rules="rules">

							<!-- 指标类别 -->
							<view class="" v-if="fromDate.performance_type !== '系统'">
								<uni-forms-item :label-width="95" required label="指标类别" name="name">
									<view class="name_type" @click="chooseMeasures">
										<view class="choose_type">{{evaluation.name || '请选择指标类别'}}</view>
										<image class="name_right" src="../../static/images/performance/right.png"
											mode="">
										</image>
									</view>
								</uni-forms-item>
								<!-- 指标编码 -->
								<view class="first_input">
									<uni-forms-item :label-width="95" label="指标编码">
										<view>
											{{info.index_encode1 || '-'}}
										</view>
									</uni-forms-item>
								</view>
								<!-- 指标类型 -->
								<uni-forms-item :label-width="95" required label="指标类型" name="work">
									<xbd-select-three :carId.sync="evaluation.work" :twoType.sync="info.index_type1"
										:visible.sync="visible" :infoList="indicatorTypes">
										<template>
											<view class="select" @click="visible = true">
												<view class="text" v-if="work.length!==0">
													{{evaluation.work || '请评定指标类型'}} </view>
												<view class="text prColor" v-else> 请评定指标类型 </view>
												<image class="image" src="@/static/images/health/right.svg"
													mode="">
												</image>
											</view>
										</template>
									</xbd-select-three>
								</uni-forms-item>
								<!-- 指标占比 -->
								<uni-forms-item :label-width="95" required label="指标占比" name="proportion">
									<xbd-select-three :carId.sync="evaluation.proportion"
										:twoType.sync="info.index_poroportion1" :visible.sync="visible1"
										:infoList="percentTypes">
										<template>
											<view class="select" @click="visible1 = true">
												<view class="text" v-if="proportion.length!==0">
													{{evaluation.proportion || '请评定指标占比'}}
												</view>
												<view class="text prColor" v-else> 请评定指标占比 </view>
												<image class="image" src="@/static/images/health/right.svg"
													mode="">
												</image>
											</view>
										</template>
									</xbd-select-three>
								</uni-forms-item>
							</view>


							<!-- 完成时间 -->
							<uni-forms-item :label-width="95" required label="完成时间" name="time">
								<xbd-select-three :carId.sync="evaluation.time" :twoType.sync="info.complete_time1"
									:visible.sync="visible2" :infoList="evaluatePers">
									<template>
										<view class="select" @click="visible2 = true">
											<view class="text" v-if="time.length!==0"> {{evaluation.time || '请评定完成时间'}}
											</view>
											<view class="text prColor" v-else> 请评定完成时间 </view>
											<image class="image" src="@/static/images/health/right.svg" mode="">
											</image>
										</view>
									</template>
								</xbd-select-three>
							</uni-forms-item>
							<!-- 完成效果 -->
							<uni-forms-item :label-width="95" required label="完成效果" name="effect">
								<xbd-select-three :carId.sync="evaluation.effect" :twoType.sync="info.complete_result1"
									:visible.sync="visible3" :infoList="effectPers">
									<template>
										<view class="select" @click="visible3 = true">
											<view class="text" v-if="effect.length!==0">
												{{evaluation.effect || '请评定完成效果'}} </view>
											<view class="text prColor" v-else> 请评定完成效果 </view>
											<image class="image" src="@/static/images/health/right.svg" mode="">
											</image>
										</view>
									</template>
								</xbd-select-three>
							</uni-forms-item>
							<!--加分 -->
							<uni-forms-item :label-width="95" required label="加分" name="bonusPoints">
								<uni-easyinput :clearable="false" type="text" v-model="evaluation.bonusPoints"
									placeholder="0">
								</uni-easyinput>
							</uni-forms-item>
							<!--扣分 -->
							<uni-forms-item :label-width="95" required label="扣分" name="points">
								<uni-easyinput :clearable="false" type="text" v-model="evaluation.points"
									placeholder="0">
								</uni-easyinput>
							</uni-forms-item>

						</uni-forms>
					</view>
					<view class="foot">

						<view class="btns">
							<button class="revocation" @click="confirm">确定</button>
						</view>
					</view>

				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		Performance
	} from '@/api/index.js';
	export default {
		data() {

			return {
				id: '',
				title: '申请详情',

				score: {
					point: 1,
					lastPoint: '10.00'
				},
				type: '',
				visible: false,
				visible1: false,
				visible2: false,
				visible3: false,
				flag: true,
				draftResone: '',
				fromDate: {},
				effectPers: [], //完成效果
				evaluatePers: [], //完成时间
				indicatorTypes: [], //指标类型
				percentTypes: [], //指标占比
				evaluation: {
					name: '',
					work: '',
					proportion: '',
					time: '',
					effect: '',
					bonusPoints: '0',
					points: '0',
					reason: '',
				},

				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '指标类别：请选择指标类别',
						}]
					},
					work: {
						rules: [{
							required: true,
							errorMessage: '指标类型：请评定指标类型',
						}]
					},
					proportion: {
						rules: [{
							required: true,
							errorMessage: '指标占比：请评定指标占比',
						}]
					},
					time: {
						rules: [{
							required: true,
							errorMessage: '完成时间：请评定完成时间',
						}]
					},
					effect: {
						rules: [{
							required: true,
							errorMessage: '完成效果：请评定完成效果',
						}]
					},
					bonusPoints: {
						rules: [{
							required: true,
							errorMessage: '加分：请输入分数',
						},
						{
							pattern: '^[0-9]+([.]{0,1}[0-9]+){0,1}$',
							errorMessage: '加分：请输入大于等于0的数字',
						}]
						
					},
					points: {
						rules: [{
							required: true,
							errorMessage: '扣分：请输入分数',
						},
						{
							pattern: '^[0-9]+([.]{0,1}[0-9]+){0,1}$',
							errorMessage: '扣分：请输入大于等于0的数字',
						}]
					}
				},
				info: {
					id: '',
					state: "",
					reason: "",
					index_encode1: '',
					index_class1: '',
					index_type1: '',
					index_poroportion1: '',
					complete_time1: "",
					complete_result1: '',
				},
				option: { //传参控制页面审批提示
					title: "我的审批",
					pass: true,
					msg: ""
				}
			}
		},
		methods: {
			async confirm() {
					
				
				console.log(typeof this.evaluation.bonusPoints,'this.evaluation.bonusPoints')
				const info ={
					id:this.fa_id,
					assess_detail_id:this.id,
					index_encode1:this.info.index_encode1,
					index_class1:this.info.index_class1,
					index_type1:this.info.index_type1,
					index_poroportion1:this.info.index_poroportion1,
					complete_time1:this.info.complete_time1,
					complete_result1:this.info.complete_result1,
					add_score:this.evaluation.bonusPoints,
					subtract_score:this.evaluation.points
				}
				console.log(info, 'infopass')

				try{
					const valid = await this.$refs.form.validate();
				// const reg = /^[0-9]+([.]{0,1}[0-9]+){0,1}$/;
				// 	if(!reg.test(this.evaluation.bonusPoints)){
				// 		return uni.showToast({
				// 				title: '加分：请输入大于等于0的数',
				// 				icon: 'none',
				// 			})
				// 	}else if(!reg.test(this.evaluation.points)){
				// 		return uni.showToast({
				// 				title: '扣分：请输入大于等于0的数',
				// 				icon: 'none',
				// 			})
				// 	}
					if (this.flag) {
						try {
							this.flag = false
							this.$showLoading('加载中');
							const res = await Performance.getPerformanceEnsure(info);
							uni.hideLoading();
							if(res.success){
								
								uni.showToast({
										title: res.msg,
										icon: 'none',
									})
									uni.navigateBack({
										delta: 1
									});
									
							}else{
								this.flag = true
								uni.showToast({
										title: res.msg,
										icon: 'none',
									})
							}
							console.log(res)
							uni.hideLoading();
						} catch (e) {
							uni.hideLoading();
							console.log(e);
						}
					}
				}catch(e){
					console.log(e,'e')
					uni.hideLoading();
					uni.showToast({
						title: e[0].errorMessage,
						icon: 'none'
					})
					//TODO handle the exception
				}
				
			},
			// 获取个人指标接口
			async getThirdOther() {
				try {
					this.$showLoading('加载中');
					const res = await Performance.getThirdOther(this.id);
					uni.hideLoading();
					console.log(res, "list")
					const details = res.data.details
					this.fromDate = details;
					this.effectPers = res.data.effectPers.map(item=>{
						let o={
							label: item.label+'('+item.remark+')',
							value: item.value
						}
					 	return o
					})
					this.evaluatePers = res.data.evaluatePers.map(item=>{
						let o={
							label: item.label+'('+item.remark+')',
							value: item.value
						}
					 	return o
					})
					
					if(this.fromDate.performance_type !== '系统'){
						this.indicatorTypes = res.data.indicatorTypes.map(item=>{
							let o={
								label: item.label+'('+item.remark+')',
								value: item.value
							}
						 	return o
						})
						this.percentTypes = res.data.percentTypes.map(item=>{
							let o={
								label: item.label+'('+item.remark+')',
								value: item.value
							}
						 	return o
						})
					}
					
						this.evaluation.effect = details.complete_result
						console.log(this.evaluation.effect,'this.evaluation.effect')
						this.info.index_poroportion1 = details.index_poroportion1
						this.evaluation.time = details.complete_time
						this.evaluation.work = details.index_type
					this.evaluation.name = details.index_class 
					this.info.index_encode1 = details.index_code 
					this.evaluation.proportion = details.index_poroportion
					this.evaluation.bonusPoints = details.add_socre
					this.evaluation.points = details.sub_point
					this.info.complete_time1 = details.complete_time1
					this.info.complete_result1 = details.complete_result1
					uni.hideLoading();
				} catch (e) {
					uni.hideLoading();
					console.log(e);
				}
			},
			chooseMeasures() {
				uni.navigateTo({
					url: `./performanceMeasures?msg=2&id=${this.id}`,
				})
			},
			eventCallback(val) {
				this.evaluation.name = val.label
				this.info.index_encode1 = val.label.replace(/[^0-9]/ig, "");
				this.info.index_class1 = val.id
				console.log(val, 'choose')
			},
		},
		computed: {
			...mapState(['windowHeight'])
		},
		onLoad(res) {

			uni.$on('chooseTree', this.eventCallback)
			this.id = res.id
			this.info.id = this.id
			this.fa_id= res.fa_id
			this.getThirdOther()
			console.log(res)
		},
		onUnload() {
			uni.$off('chooseTree');
			
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .draft:after {
		border: none;
	}

	::v-deep .uni-easyinput {
		border: 2rpx solid #999999;
		border-radius: 8rpx;
	}

	::v-deep .uni-easyinput__content-input {
		background-color: #F8F8F8;

	}

	::v-deep .uni-forms-item__content {
		min-height: 0px;
		display: flex;
		align-items: center;
	}

	::v-deep .uni-easyinput__content-textarea {
		background-color: #F8F8F8;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #999999 !important;
	}

	::v-deep .label-text {
		font-size: 32rpx !important;
	}

	::v-deep .is-input-error-border {
		border: 0 !important;
	}

	.content {
		padding: 30px 50rpx;
		font-size: 32rpx;

		.first_input {
			box-sizing: border-box;
			padding-left: 5px;
		}

		.box {
			position: relative;
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
			color: #194769;

			.box_right {
				box-sizing: border-box;
				padding-top: 4rpx;
				font-size: 28rpx;
				width: 420rpx;
				color: #000000;
				word-wrap: break-word;
				word-break: break-all;
				overflow: hidden;
			}

			.box_tag {
				margin: 20px 0;
			}

			.date {
				box-sizing: border-box;
				padding-right: 100rpx;
			}

			.icon {
				position: absolute;
				top: -10px;
				right: 0;

				image {
					width: 150rpx;
					height: 150rpx;
				}

			}
		}



		.line {
			border-bottom: 1px solid #eaeaea;
			margin-bottom: 15px;
		}

		.title {
			font-size: 32rpx;
			color: #194769;
			font-weight: 900;
			margin-bottom: 20px;
		}

		.audit_type {
			font-size: 28rpx;
			color: #B7B5B5;
			margin-bottom: 60rpx;
		}


		.foot {
			margin-top: 20px;
			box-sizing: border-box;
			padding: 20upx 4upx;

			.btns {
				display: flex;
				justify-content: space-between;

				button {
					width: 300rpx;
					height: 30px;
					line-height: 30px;
					font-size: 28rpx;
					box-sizing: border-box;
				}

				.revocation {
					border-radius: 8rpx;
					background: url(../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
					margin-left: 180rpx;
				}
			}
		}
	}



	.draft_score {
		font-size: 28rpx;
		display: flex;
		flex-direction: column;

		padding: 0 30rpx 40rpx;
		margin-bottom: 10rpx;

		.popup {
			display: flex;
			margin-left: 100rpx;

			.popupBox {
				width: 100rpx;
			}
		}
	}

	.select {
		display: flex;
		justify-content: space-between;
		align-items: center;

		height: 64rpx;
		line-height: 60rpx;
		border-radius: 8rpx;
		border: 2rpx solid #999999;
		box-sizing: border-box;
		padding: 0 20rpx 0 20rpx;
		// color: #BBC0C9 !important;

		.text {
			width: 360rpx;
			color: #999999;
			// text-align: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

		}

		.prColor {
			color: #999999 !important;
		}

		.image {
			transform: rotate(90deg);
			width: 38rpx;
			height: 38rpx;
		}
	}

	.area {
		position: relative;

		.mit {
			position: absolute;
			bottom: 20px;
			right: 30rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}

	.name_type {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		height: 64rpx;
		// line-height: 60rpx;
		border: 2rpx solid #999999;
		border-radius: 8rpx;
		color: #999999;

		.choose_type {
			box-sizing: border-box;
			padding: 0 20rpx;
			width: 400rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.name_right {
			width: 48rpx;
			height: 48rpx;
			color: #999999;
		}
	}
</style>
